<template>
    <el-container direction="vertical">
        <el-row>
            <el-col :span="4">字段名</el-col>
            <el-col :span="4">数据类型</el-col>
            <el-col :span="4">值</el-col>
            <el-col :span="4">描述</el-col>
            <el-col :span="4">操作</el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="info">
            <el-row>  
                <div v-for="(item, index) in form.par" >
                    <el-input v-model="item.par" placeholder="Key" style="width: 290px"></el-input>
                    <el-select v-model="item.Type" placeholder="请选择请求方式" style="width: 295px">
                    <el-option v-for="i,j in Types" :label="i.Keys" :value="i.Values"></el-option>
                    </el-select>
                    <el-input v-model= "item.Value" style="width: 300px"></el-input>
                    <el-input v-model="item.Desc" placeholder="Desc" style="width: 290px"></el-input>
                    <el-button  @click.prevent="removeDomain(item)"><i class="fa fa-trash-o fa-lg"></i></el-button>
                </div>
            </el-row>
        </div>
        <div>
            <el-divider></el-divider>
            <el-button @click="addDomain">新增参数</el-button> 
        </div>
    
    </el-container>
    
</template>

<script>
export default {
    name: 'ApiDetail',
    // props: {
    //   inputName: String,
    //   required: true,
    // },
    data(){
        return {
            childValue:"子页面",
            form:{ 
                par:[{Key:"dsfdf",Type:"",Value:"sdfewwe",Desc:"desc"}]
            },
            Types:[
                {Keys:"MD5加密",Values:"Md5"},
                {Keys:"时间戳",Values:"TimeStamp"},
                {Keys:"随机数",Values:"Random"},
                {Keys:"整数",Values:"Int"},
                {Keys:"字符串",Values:"String"},
                {Keys:"文件",Values:"File"},
                {Keys:"随机字符串",Value:"RandomStr"}
            ]
        }
    },
    mounted:function () {
    },//mounted
    methods: {
        childClick () {
            // childByValue是在父组件on监听的方法
            // 第二个参数this.childValue是需要传的值
            this.$emit('childByValue', this.childValue)
        },
        addDomain() {
            this.form.par.push({
              Key:"",Value:"",Desc:""
            });
        }, 
        removeDomain(item) {
        var index = this.form.par.indexOf(item)
        if (index !== -1) {
          this.form.par.splice(index, 1)
        }
      },

    }
}
</script>

<style scoped>
.info{
    /*height: 100px;*/
    height:150px;
    overflow:auto
    /*background-color: blue;*/
}
.item{
    height: 150px;
    
}
 
</style>
